import { NavBar } from "antd-mobile";
import { useNavigate } from "react-router-dom";
import style from "../css/allfenlei.module.css";
import { getfenlei } from "./API";
import { useEffect, useState } from "react";
export default () => {
  let nav = useNavigate();

  let back = () => {
    nav("/");
  };
  let [list, setList] = useState([]);
  let fenlei = async () => {
    let { data } = await getfenlei();
    console.log(data);
    list = data.data.list;
    setList([...list]);
  };
  useEffect(() => {
    fenlei();
  }, []);
  return (
    <div className={style.box}>
      <div>
        <NavBar
          style={{
            "--height": "44px",
            "--border-bottom": "1px #eee solid",
          }}
          onBack={back}
        >
          <p style={{ fontSize: "20px" }}>全部分类</p>
        </NavBar>
      </div>
      <div>
        {list.map((item, index) => {
          return (
            <div className={style.list} key={item.id}>
              <h1>{item.name}</h1>
              <ul>
                {item.tag_list.map((a: any, b: any) => {
                  return (
                    <li key={a.id}>
                      <img src={a.image} alt="" />
                      <p>{a.name}</p>
                    </li>
                  );
                })}
              </ul>
            </div>
          );
        })}
      </div>
    </div>
  );
};
